<template>
  <div class="assessed flex-col">
    <div
      class="item flex-col bg-white"
      v-for="(item, index) in data"
      :key="index"
    >
      <div class="assess-content">
        {{ item.userContent }}
      </div>
      <!-- <div class="imgs flex" v-if="item.imgs.length > 0"> -->
      <div class="imgs flex">
        <img
          :src="img || changeUrl"
          alt=""
          class="img"
          mode="aspectFit"
          v-for="(img, index) in item.imgs"
          :key="index"
        />
      </div>
      <div class="info flex">
        <div class="left">
          <img
            :src="item.coverUrl || changeUrl"
            mode="aspectFit"
            alt=""
            class="img"
          />
        </div>
        <div class="right flex-col">
          <p class="title ellipsis_1">
            {{
              item.goodsName ||
              "苹果13Promax 5G手机全新国行全苹果13Promax 5G手机全新国行全"
            }}
          </p>
          <p class="infoss">
            套餐:{{ item.specName || "租完即送"
            }}<!-- 【到期需归还/可买断】 -->
          </p>
          <p class="price">
            总租金:￥<span class="pricess">{{ item.allRentFee || 0 }}</span
            >（{{ item.startEndTimeString }}期）
          </p>
        </div>
      </div>
      <div class="base flex">
        <span class="time">{{ item.createTime || "" }}</span>
        <div class="display flex">
          <img
            src="../../../static/icones/icon8.png"
            alt=""
            class="icon"
            mode="widthFix"
          />
          <img
            src="../../../static/icones/icon9.png"
            alt=""
            class="icon"
            mode="widthFix"
          />
          <span class="text">匿名</span>
        </div>
      </div>
    </div>
    <NoData v-if="data.length === 0" />
  </div>
</template>

<script>
import NoData from "../../../components/noData.vue";
export default {
  components: { NoData },
  data() {
    return {
      data: [
        {
          userContent:
            "京哈跟进哈感觉好贵这也太棒了吧~这也太棒了吧~这也太棒了吧~这也太 棒了吧这也太棒了吧~这也太棒了吧~这也太棒了吧~这也太 棒了吧这也太棒了吧~这也太棒了吧~这也太棒了吧~这也太 棒了吧这也太棒了吧~这也太棒了吧~这也太棒了吧~这也太 棒了吧这也太棒了吧~这也太棒了吧~这也太棒了吧~这也太 棒了吧",
          imgs: [
            "../../../static/icones/pic1.png",
            "../../../static/icones/pic1.png",
            "../../../static/icones/pic1.png",
            "../../../static/icones/pic1.png",
            "../../../static/icones/pic1.png",
            "../../../static/icones/pic1.png",
            "../../../static/icones/pic1.png",
            "../../../static/icones/pic1.png",
          ],
          coverUrl: "../../../static/icones/pic1.png",
          goodsName:
            "5G手机全新国行全苹果13Promax5G手机全新国行全苹果13P5G手机全新国行全苹果13P",
          specName: "【到期需归还",
          allRentFee: 444,
          startEndTimeString: "0",
          createTime: "2022-07-13",
        },
        {
          userContent: "京哈跟进哈感觉好贵",
          coverUrl: "../../../static/icones/pic1.png",
          goodsName:
            "5G手机全新国行全苹果13Promax5G手机全新国行全苹果13P5G手机全新国行全苹果13P",
          specName: "【到期需归还",
          allRentFee: 444,
          startEndTimeString: "0",
          createTime: "2022-07-13",
        },
        {
          userContent: "京哈跟进哈感觉好贵",
          coverUrl: "../../../static/icones/pic1.png",
          goodsName:
            "5G手机全新国行全苹果13Promax5G手机全新国行全苹果13P5G手机全新国行全苹果13P",
          specName: "【到期需归还",
          allRentFee: 444,
          startEndTimeString: "0",
          createTime: "2022-07-13",
        },
      ],
      config: {
        page: 1,
        size: 10,
        finish: false,
        changeUrl: "../../../static/icones/pic1.png",
      },
    };
  },
  computed: {},
  mounted() {
    // this.resetData();
  },
  // onPullDownRefresh () {
  //   this.resetData()
  // },
  // onReachBottom() {
  //   if (this.assessData.finish) {
  //     return;
  //   }
  //   this.getData();
  // },
  methods: {
    getData() {
      // this.$http
      //   .request({
      //     url: "/user/myOrderCommentList.json",
      //     data: {
      //       pageNumber: this.config.page,
      //       pageSize: this.config.size,
      //     },
      //   })
      //   .then(({ data: { myOrderCommentDTOList } }) => {
      //     const compontsList = myOrderCommentDTOList.map((item, index) => {
      //       return {
      //         ...item,
      //         imgs: (() => {
      //           if (item.images) {
      //             const data = [];
      //             item.images.split(";").forEach((img) => {
      //               data.push(...img.split(","));
      //             });
      //             return data;
      //           }
      //           return [];
      //         })(),
      //       };
      //     });
      //     this.data.push(...compontsList);
      //     if (myOrderCommentDTOList.length < this.config.size) {
      //       this.config.finish = true;
      //     } else {
      //       this.config.finish = false;
      //     }
      //   });
    },
    resetData() {
      // this.data = [];
      // this.config.page = 1;
      // this.config.finish = false;
      // this.getData();
    },
  },
};
</script>
<style lang="scss">
.assessed {
  width: 100%;
  padding: 12px;
  .item {
    width: 100%;
    min-height: 117px;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 12px;
    background-color: #fff;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.02);

    .assess-content {
      min-height: 30px;
      color: #3d3d3d;
      font-size: 14px;
      font-family: PingFang SC Bold;
      margin-left: 6px;
      padding-bottom: 12px;
    }
    .imgs {
      // padding: 12px 0;
      flex-wrap: wrap;
      .img {
        width: 99px;
        height: 99px;
        margin-right: 15px;
        border-radius: 5px;
        margin-bottom: 15px;
        background-color: #f9f9f9;
        &:nth-child(3n) {
          margin-right: 0;
        }
      }
    }
    .info {
      width: 100%;
      // margin-top: 12px;
      min-height: 70px;
      .left {
        width: 69px;
        height: 69px;
        background-color: #f9f9f9;
        .img {
          height: 69px;
          width: 69px;
        }
      }
      .right {
        margin-left: 12px;
        max-width: 75%;
        .title {
          color: #3d3d3d;
          font-family: PingFang SC Bold;
          font-size: 14px;
          line-height: 20px;
        }
        .infoss {
          color: #9d9d99;
          font-size: 12px;
          line-height: 17px;
          margin-top: 6px;
        }
        .price {
          color: #3d3d3d;
          font-family: PingFang SC Medium;
          font-size: 14px;
          line-height: 20px;
          margin-top: 6px;
          .pricess {
            font-size: 18px;
            font-weight: 700;
            font-family: DINPro-Bold;
          }
        }
      }
    }
    .base {
      margin-top: 12px;
      .time {
        color: #aaaaaa;
        font-size: 12px;
      }
      .display {
        margin-left: auto;
        .icon {
          width: 22px;
        }
        .text {
          color: #aaaaaa;
          font-size: 12px;
        }
      }
    }
  }
  // .assess {
  //   width: 100%;
  //   min-height: 348px;
  //   border-radius: 5px;
  //   margin-top: 10px;
  //   .title {
  //     margin-left: 16px;
  //     margin-top: 13px;
  //     .name {
  //       font-size: 16px;
  //       font-weight: 800;
  //       line-height: 1px;
  //       color: #232323;
  //     }
  //     .tag {
  //       padding: 0 7px;
  //       height: 19px;
  //       background: #29B5FF;
  //       font-size: 13px;
  //       font-weight: 400;
  //       line-height: 19px;
  //       text-align: center;
  //       color: #FFFFFF;
  //       width: fit-content;
  //       margin-left: 10px;
  //     }
  //   }
  //   .content {
  //     margin-top: 50px;
  //     display: flex;
  //     .left {
  //       width: 126px;
  //       .bg {
  //         width: 71px;
  //         height: 71px;
  //       }
  //     }
  //     .right {
  //       width: 250px;
  //       .tags {
  //         padding: 0 5px;
  //         height: 20px;
  //         border: 1px solid #29B5FF;
  //         line-height: 20px;
  //         text-align: center;
  //         font-size: 11px;
  //         font-weight: 400;
  //         color: #29B5FF;
  //         width: fit-content;
  //       }
  //       .desc {
  //         font-size: 12px;
  //         font-weight: 400;
  //         color: #A1A1A1;
  //         margin-top: 5px;
  //       }
  //       .price {
  //         display: flex;
  //         margin-top: 5px;
  //         width: 100%;
  //         .text, .num {
  //           font-size: 14px;
  //           font-weight: 400;
  //           line-height: 20px;
  //           color: #232323;
  //         }
  //         .num {
  //           margin-left: auto;
  //           margin-right: 12px;
  //         }
  //       }
  //     }
  //   }
  //   .info {
  //     margin-top: 29px;
  //     padding: 0 19px;
  //     width: 100%;
  //     .item {
  //       margin-bottom: 11px;
  //       display: flex;
  //       // align-items: center;
  //       .name {
  //         font-size: 16px;
  //         font-weight: 800;
  //         color: #232323;
  //         width: 80px;
  //         margin-right: 16px;
  //       }
  //       .scopes {
  //         height: 23px;
  //         .scope {
  //           margin-right: 6px;
  //           width: 15px;
  //           height: 15px;
  //         }
  //       }
  //       .assess-content {
  //         font-size: 13px;
  //         font-weight: 400;
  //         color: #A2A2A2;
  //         width: 219px;
  //       }
  //     }
  //   }
  // }
  // .btn {
  //   width: 300px;
  //   height: 48px;
  //   background: #29B5FF;
  //   opacity: 1;
  //   border-radius: 24px;
  //   position: fixed;
  //   left: 25px;
  //   bottom: 9px;
  //   font-size: 18px;
  //   line-height: 48px;
  //   text-align: center;
  //   color: #FFFFFF;
  // }
}
</style>
